<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.keywords" placeholder="商品名" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item label="">
        <el-select v-model="dataForm.priceType" placeholder="价格类型" value="">
          <el-option label="全部" value="0" ></el-option>
          <el-option label="兑换商城" value="1" ></el-option>
          <el-option label="福利商城" value="2" ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="">
        <el-select v-model="dataForm.manufactor" placeholder="厂家" value="">
          <el-option :label="list.name" :value="list.userId" :key="list.userId" v-for="list in manufactorList"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="">
        <el-select v-model="dataForm.goodsStatuses" placeholder="商品状态" value="">
          <el-option label="全部" value="" ></el-option>
          <el-option label="正常" value="0" ></el-option>
          <el-option label="仓库中" value="1" ></el-option>
          <el-option label="管理下架" value="-2" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="userId">
        <el-select v-model="dataForm.userId" filterable placeholder="供应商名称" clearable>
          <el-option
            v-for="(item,index) in this.dataForm.allRole"
            :key="index"
            :label="item.username"
            :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="">
        <el-select v-model="selectParentClass" filterable placeholder="一级分类" value="selectParentClass" @change="selectSubClass=''">
          <el-option :value="-1" :key="-1" label="请选择分类"></el-option>
          <el-option
            v-for="(item,index) in classList"
            :key="index"
            :label="item.className"
            :value="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="" v-if="selectParentClass !== -1">
        <el-select v-model="selectSubClass" filterable placeholder="二级分类" value="selectSubClass" >
          <el-option
            v-for="item in (classList[selectParentClass].subGoodsClassList)"
            :key="item.id"
            :label="item.className"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" v-if="isAuth('goods:batchModifyState')">
        <el-select v-model="batchValue" placeholder="批量操作">
          <el-option key="batchNew" label="批量成为新品" value="batchNew"></el-option>
          <el-option key="batchCancelNew" label="批量取消新品" value="batchCancelNew"></el-option>
          <el-option key="batchBest" label="批量成为必买" value="batchBest"></el-option>
          <el-option key="batchCancelBest" label="批量取消必买" value="batchCancelBest"></el-option>
          <el-option key="batchLowShelf" label="批量下架" value="batchLowShelf"></el-option>
          <el-option key="batchUpShelf" label="批量上架" value="batchUpShelf"></el-option>
          <el-option key="batchDelete" label="批量删除" value="batchDelete"></el-option>
        </el-select>
        <el-button type="primary" v-if="isAuth('goods:batchModifyState')" plain @click="batch()" :disabled="batchValue===''">批量操作</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="
        dataForm.key = ''
         selectParentClass = -1
          selectSubClass = ''
          dataForm.goodsStatuses = ''
          dataForm.priceType = ''
          dataForm.keywords = ''
          getDataList()">重置</el-button>
        <el-button plain type="success" @click="getDataList()">查询</el-button>
        <el-button icon="el-icon-download" type="primary" @click="excel()">导出</el-button>
      </el-form-item>
      <br>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-row :gutter="20">
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="商品类型:">
                    <span>{{ props.row.className }}</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="型号:">
                    <span>{{ props.row.goodsSerial }}</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="商品原价:">
                    <span>{{ props.row.goodsPrice }}</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="商品状态:">
                    <span v-if="props.row.goodsStatus === 0">正常</span>
                    <span v-if="props.row.goodsStatus === 1">仓库中</span>
                    <span v-if="props.row.goodsStatus === -2">管理下架</span>
                    <span v-if="props.row.goodsStatus === -1">下架</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="库存:">
                    <span>{{ props.row.goodsInventory }}</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item label="点击量:">
                    <span>{{ props.row.goodsClick }}</span>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="添加时间:">
                    <span>{{ props.row.addTime }}</span>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <!-- <el-table-column
        prop="img"
        header-align="center"
        align="center"
        label="商品图片">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover">
            <img :src="scope.row.img" style="max-width: 300px"/>
            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 30px;max-width: 80px">
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        header-align="center"
        align="center"
        label="商品名称"
        width="400px">
        <template slot-scope="scope">
            <div>
              <div style="float: left">
              <img :src="scope.row.img" style="width: 150px; height:100px; margin-top: 26px"/>
              </div>
              <div style="float: left; margin-left: 140px; margin-top: -100px">
              <ul>
                <li style="list-style-type:none;float: left"><a :href="scope.row.url">{{scope.row.goodsName}}</a></li><br/>
                <li style="list-style-type:none;float: left">供应商名称：{{scope.row.username}}</li>
              </ul>
              </div>
            </div>
        </template>
        <!-- <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.goodsName}}</a>
        </template> -->
      </el-table-column>
      <!-- <el-table-column
        prop="priceType"
        header-align="center"
        align="center"
        label="价格类型"
        width="150px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.priceType === 0" type="warning">现金</el-tag>
          <el-tag v-if="scope.row.priceType === 1" type="success">兑换商城</el-tag>
          <el-tag v-if="scope.row.priceType === 2">福利商城</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="vipPrice"
        header-align="center"
        align="center"
        label="价格">
        <template slot-scope="scope">
          <ul>
            <li style="list-style-type:none;float: left">商城售价：{{scope.row.vipPrice}}</li><br/>
            <li style="list-style-type:none;float: left">兑换积分：{{scope.row.integral}}</li><br/>
            <li style="list-style-type:none;float: left">赠送积分：{{scope.row.giveIntegral}}</li><br/>
            <li style="list-style-type:none;float: left">商品利润：{{scope.row.goodsCostingPrice}}</li><br/>
            <li style="list-style-type:none;float: left">商品型号：{{scope.row.goodsSerial}}</li>
          </ul>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="goodsCostingPrice"
        header-align="center"
        align="center"
        label="利润">
      </el-table-column> -->
      <el-table-column
        prop="goodsSaleNum"
        header-align="center"
        align="center"
        label="库存/销量">
        <template slot-scope="scope">
          <ul>
            <li style="list-style-type:none;float: left">库存：{{scope.row.goodsInventory}}</li><br/>
            <li style="list-style-type:none;float: left">销量：{{scope.row.goodsSaleNum}}</li><br/>
          </ul>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="getAllMoney"
        header-align="center"
        align="center"
        label="销售金额">
      </el-table-column> -->
      <el-table-column
        prop="goodsInventoryDetail"
        header-align="center"
        align="center"
        label="sku">
        <template slot-scope="scope">
          <el-button type="success" plain round  size="mini" @click="openSpecs(scope.row.id,scope.row.goodsInventoryDetail)">查看sku</el-button>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <!-- <el-row :gutter="20" v-if="dataForm.roleType !== 6">
            <el-col :span="10">
              <span style=" font-size: 12px;">上架</span>
            </el-col>
            <el-col :span="10">
              <el-switch
                style="margin-left: -15px;"
                v-model="scope.row.goodsStatus === 0"
                @change="batch(scope.row.id,scope.row.goodsStatus===0 ? 'batchLowShelf' : 'batchUpShelf')"
              >
              </el-switch>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col>
              <el-button type="primary" size="mini" v-if="scope.row.goodsStatus !== 0 && dataForm.roleType !== 6" @click="updateGoodsStatus(scope.row.id, 0)">上架</el-button>
              <el-button type="danger" size="mini" v-if="scope.row.goodsStatus === 0" @click="updateGoodsStatus(scope.row.id, -2)">下架</el-button>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="10"> -->
              <el-button type="text" size="small" v-if="scope.row.updateStatus === 0" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <!-- </el-col>
          </el-row> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog
      title="修改"
      width="90%"
      :visible.sync="addOrUpdateVisible">
      <upload-goods v-if="addOrUpdateVisible" ref="uploadGoods" @refreshDataList="getDataList"></upload-goods>
    </el-dialog>
    <specs-add-or-update v-if="dialogVisible" ref="specsAddOrUpdate" @refreshDataList="getDataList"></specs-add-or-update>
  </div>
</template>

<script>
  import SpecsAddOrUpdate from '../specs-add-or-update'
  import UploadGoods from '../upload-goods'
  export default {
    data () {
      return {
        batchValue: '',
        dataForm: {
          keywords: '',
          manufactor: '',
          time: [],
          priceType: '',
          goodsStatuses: '',
          bestOrNew: '',
          roleType: '',
          allRole: [],
          userId: ''
        },
        dialogVisible: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        classList: [],
        selectParentClass: -1,
        selectSubClass: '',
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        manufactorList: []
      }
    },
    components: {
      UploadGoods,
      SpecsAddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.addOrUpdateVisible = false
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/goods/supplier/queryGoodsList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'keywords': this.dataForm.keywords,
            'startTime': this.dataForm.time[0],
            'endTime': this.dataForm.time[1],
            'priceType': this.dataForm.priceType,
            'goodsStatuses': this.dataForm.goodsStatuses,
            'goodsClass': this.selectParentClass !== -1 ? (this.selectSubClass || this.classList[this.selectParentClass].id || null) : null,
            'manufactor': this.dataForm.manufactor,
            'userId': this.dataForm.userId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })

        // 请求分类
        this.$http({
          url: this.$http.adornUrl(`/activity/goods/queryClassList`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.classList = data.data
          }
        })

        // 请求厂家
        // this.$http({
        //   url: this.$http.adornUrl(`/goods/supplier/queryManufactorList`),
        //   method: 'get',
        //   params: this.$http.adornParams()
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.manufactorList = data.data
        //   }
        // })
        // 当前角色类型
        this.$http({
          url: this.$http.adornUrl(`/goods/supplier/queryRoleType`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.roleType = data.data
          }
        })
        // 供应商名称
        this.$http({
          url: this.$http.adornUrl(`/goods/supplier/queryAllRole`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.allRole = data.data
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.uploadGoods.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/goods/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      openSpecs (id, val) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.specsAddOrUpdate.init(id, JSON.parse(val))
        })
      },
      // 对商品进行上下架
      updateGoodsStatus (id, type) {
        this.$confirm(`确定对[id=${id}]商品进行操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/goods/supplier/queryRoleType/${id}/${type}`),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      batch (id, val) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        if (ids.length === 0) {
          this.$message.error('请选择数据')
          return
        }
        let type = val || this.batchValue
        this.$confirm(`确定对[id=${ids.join(',')}]进行操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/goods/batchModifyState/' + type + ''),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      excel () {
        window.location.href = this.$http.adornUrl(`/goods/supplier/goodsExcel?token=${this.$cookie.get('token')}&priceType=${this.dataForm.priceType}&startTime=${this.dataForm.startTime}&endTime=${this.dataForm.endTime}&goodsStatuses=${this.dataForm.goodsStatuses}&bestOrNew=${this.dataForm.bestOrNew}&goodsManagerId=33307`)
      }
    }
  }
</script>
<style>
  .el-row {
    margin-bottom: 0px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .el-col .el-form-item{
    margin-bottom: 0 !important;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
